
<template>
    <el-form 
    
    ref="form" 
    :inline="true" 
    :model="form" 
    
    label-width="80px" 
    enctype="multipart/form-data" >
        
        <el-form-item 
        label="产品名"
       
         >
            <el-input  v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="产品分类">
            <el-select v-model="form.type" placeholder="产品分类">
            

            <el-option 
            v-for="(item) in form.typeList"
            :key="item.id"
            :label="item.name" 
            :value="item.id"></el-option>

           
            </el-select>
            <router-link to="/wechat/productType">
                <span>新增分类</span>
            </router-link>
            
        </el-form-item>

        <el-form-item label="商品价格">
            <el-input-number 
            v-model="form.price" 
            @change="priceChange" 
            :min="100" 
            label="商品价格"></el-input-number>
        </el-form-item>

        <el-form-item label="商品库存">
            <el-input-number 
            v-model="form.stock" 
            @change="stockChange" 
            :min="100" 
            label="商品库存"></el-input-number>
        </el-form-item>

        <div class='picUp'>
            <el-form-item label="产品图片">
                <el-upload
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="beforeupload"
                :multiple="true"
                :auto-upload="false"
                enctype="multipart/form-data"
                :file-list="fileList">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            
        </div>
        <el-form-item label="是否上架">
            <el-switch 
            v-model="form.Onshow"
            active-value="1"
            inactive-value="0"></el-switch>
        </el-form-item>

        
        
        
        
        <Editor @getEditorData="getEditorData" :url='url'></Editor>


        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
import Editor from 'index/components/Editor'
export default {
    name:'ProcutForm',  
    components:{
        Editor 
    },
    data() {
        return {
            editorData: '',
            
            form: {
                name: '',
                type: '',
                typeList:[],
                Onshow: true,
                price:0,
                stock:0
                
            },
            formData: new FormData(),
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[],
            i:1
        }
    },
    mounted() {
        // console.log('form')
        this.init();
    },
    
    computed:{
        ...mapState(['baseUrl','infoChange']),
        url:function (){
            return "/api/product/content"
        }
    },
    methods: {
      init(){
          this.getTypeList();
      },  
      getTypeList(){
           axios.get(
                this.baseUrl+'category/all',
                {
                    params:{
                        id:true
                    }
                })
            .then(this.getTypeListSucc)
      },
      getTypeListSucc(response){
          console.log(response)
          this.form.typeList = response.data
      },  
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
        stockChange(value) {
        // console.log(value);
        this.form. price = value
        },
        priceChange(value) {
        // console.log(value);
        this.form. price = value
        },
        getEditorData(val) {

           this.editorData = val 
        //    console.log(this.editorData)

        } ,
         //阻止upload的自己上传，进行再操作
        beforeupload(file) {
            // console.log(file);
            //创建临时的路径来展示图片
            var windowURL = window.URL || window.webkitURL;
            
            this.dialogImageUrl = windowURL.createObjectURL(file);
            //重新写一个表单上传的方法
            
            
            // this.i=this.i+1;
            // console.log('dialogImageUrl'+this.dialogImageUrl)
            // console.log('file')
            // this.param = new FormData()
            this.i++
            // this.formData.append('file'+this.i, file)
            this.formData.append('file[]', file)
            // console.log(this.formData.get("file"))
            // param.append('file', file, file.name);
            
            return false;
        },
        //覆盖默认的上传行为
        httprequest() {

        },
        onSubmit() {
             let that = this
            
            // console.log(param)
            var name = this.form.name;
            var type = this.form.type;
            var Onshow = this.form.Onshow;
            var content =this.editorData; 
            var stock =this.form.stock;
            var price =this.form.price;
            if(name==''||type==""||Onshow==""||content==""||stock==""||price==""){
                const h = this.$createElement;

                this.$notify({
                title: '警告',
                type: 'warning',
                offset: 100,
                message: h('i', { style: 'color: teal'}, '商品所有信息必须填写')
                });
                return false;
            }
            //下面append的东西就会到form表单数据的fields中；
            that.formData.append('name', name);
            that.formData.append('type', type);
            that.formData.append('Onshow', Onshow);
            that.formData.append('summary', content);
            that.formData.append('stock', stock);
            that.formData.append('price', price);
             
            
            // console.log(that.formData)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                    
                },
                
                
            }
            that.$refs.upload.submit();
            // console.log(this.formData.getAll("file"))
            axios.post(this.baseUrl+"product/add", this.formData, config).then(function(result) {
                            // console.log(result);
                            // alert(result.data);

                            

                            if(result.data.errno===0){
                                that.$alert('新增成功', '特别提示', {
                                confirmButtonText: '确定',
                                closeOnClickModal:true,
                                center:true,
                                callback: action => {
                                    that.$router.push('/wechat/ProductList');
                                    that.form={brand_right:0}
                                    
                                    that.changeActive('/wechat/ProductList') 
                                    that.changeInfo(true) 
                                    that.formData.delete('file[]');
                                    that.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success',
                                    duration:'3000',
                                    showClose:true,
                                    });
                                }
                            });
                                
                            }

                            
            })
            that.$refs.upload.clearFiles();
            
        },
        ...mapMutations(['changeInfo','changeActive']),
        handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        // this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        // console.log(handlePictureCardPreview);
      }
       
    }
}
</script>
<style lang="stylus">
.el-message-box__wrapper
    z-index 20003!important
</style>
